// React.memo
// 作用：允许组件在props没有改变的情况下跳过重新渲染
// 优化点：减少没必要的重复渲染，提升性能

import { memo, useState } from "react"

// 1. 验证默认的渲染机制  子跟着父一起渲染，不管有没有props变化，只要父组件渲染，子组件就跟着一起渲染
function Son () {
  console.log('我是常规子组件Son，我重新渲染了')
  return <div>this is Son</div>
}

// 2. memo进行缓存  只有props发生变化的时候才会重新渲染 （不考虑context）
const MemoSon = memo(function Son2 ({count2}) {
  console.log('我是使用了memo包裹的子组件MemoSon，我重新渲染了')
  return <div>this is MemoSon</div>
})


function App03 () {
  // 没有传递到子组件的状态变量
  const [count, setCount] = useState(0)
  // 传递到MemoSon组件的状态变量
  const [count2, setCount2] = useState(0)

  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>count+{count}</button>
      <button onClick={() => setCount2(count2 + 1)}>MemoSon组件依赖的count2+ {count2}</button>
      {<Son />}
      <MemoSon count2={count2} />
    </div>
  )
}

export default App03
